<template>
  <div id="mycharts2">

  </div>
</template>

<script>
export default{
  data () {
    return {

    }
  },
  components: {

  },
  mounted () {
    this.echarts2()
  },
  methods: {
    echarts2 () {
      var pieChart = this.$echarts.init(document.getElementById('mycharts2'))
      pieChart.setOption({
        title: {
          text: '饼图',
          // 副标题
          subtext: '联系状元',
          // 位置
          x: 'center'
        },
        // 标记
        legend: {
          orient: 'vertical',
          left: 'left',
          data: ['湖南省', '湖北省', '浙江省', '江西省', '江苏省']
        },
        // 数据
        series: [
          {
            name: '搜索',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
              {value: 335, name: '湖南省'},
              {value: 310, name: '湖北省'},
              {value: 231, name: '浙江省'},
              {value: 1548, name: '江西省'},
              {value: 640, name: '江苏省'}
            ]
          }
        ]
      })
      window.addEventListener('resize', () => {
        pieChart.resize()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@media (max-width:767px) {
    #mycharts2{
      width: 500px;
      height: 200px;
    }
  }
  @media (min-width:768px) {
    #mycharts2{
      width: 100%;
      height: 300px;
    }
  }
 @media (min-width:992px) {
    #mycharts2{
      width: 100%;
      height: 400px;
    }
  }
  @media (min-width:1200px) {
     #mycharts2{
       width: 100%;
       height: 500px;
     }
   }

</style>
